<template>
  <div>
    <newPageHeader></newPageHeader>

    <div style="background: #f5f5f5; border-bottom: 1px solid #e6e6e6">
      <div class="company-navigate">
        <!-- <img  src="@/static/engineering5188/company/home.png" alt=""> -->
        <img src="../../../static/engineering5188/company/home.png" alt="" />
        <div>
          <span class="companyName">排行&指数</span>
        </div>
      </div>
    </div>

    <div class="dashboard">
      <div>
        <!-- 商家口碑排行榜 -->
        <div class="card-left-top">
          <div class="h2Title" style="display: flex; align-items: center">
            <div class="xian"></div>
            <h2>商家口碑排行榜</h2>
          </div>

          <div>
            <div class="list-Heard">
              <p class="pOne">排名</p>
              <p class="ptwo">商家名称</p>
              <p class="pthree">产品数量</p>
              <p class="pfour">商家信誉度</p>
            </div>

            <div
              class="list-item"
              v-for="(item, index) in reputationData"
              :key="index"
               @click="jumpShop(item)"
            >
              <div v-if="index + 1 === 1" class="list-iitemOne">1</div>

              <div v-if="index + 1 === 2" class="list-iitemTwo">2</div>

              <div v-if="index + 1 === 3" class="list-iitemThree">3</div>

              <div v-if="index + 1 > 3" class="list-iitemFour">
                {{ index + 1 }}
              </div>
              <div class="itemName">
                {{ item.company_title }}
              </div>
              <div
                class="list-iitemthree"
                style="display: flex; align-items: center"
              >
                <div class="progressDiv">
                  <el-progress
                    :show-text="false"
                    stroke-width="8"
                    :percentage="80"
                  ></el-progress>
                </div>
                <span class="productCountNum">{{ item.num }}</span>
              </div>
              <div class="xingxing">
                <van-rate v-model="item.star" size="14" color="#ffd21e" disabled-color="#ffd21e" disabled />
              </div>
            </div>
          </div>
        </div>

        <!-- 交易排行榜 -->
        <div class="card-left-bottom">
          <div class="h2Title" style="display: flex; align-items: center">
            <div class="xian"></div>
            <h2>交易排行榜</h2>
          </div>
          <div class="listDiv">
            <div class="list-Heard">
              <p class="pOne">排名</p>
              <p class="ptwo">商家名称</p>
              <p class="pthree">销售数量</p>
              <p class="pfour">商家金额</p>
            </div>

            <div
              class="list-item"
              v-for="(item, index) in transactionData"
              :key="index"
              @click="jumpShop(item)"
            >
              <div v-if="index + 1 === 1" class="list-iitemOne">1</div>

              <div v-if="index + 1 === 2" class="list-iitemTwo">2</div>

              <div v-if="index + 1 === 3" class="list-iitemThree">3</div>

              <div v-if="index + 1 > 3" class="list-iitemFour">
                {{ index + 1 }}
              </div>

              <div class="itemName">
                {{ item.company_title }}
              </div>
              <div
                class="list-iitemthree"
                style="display: flex; align-items: center"
              >
                <div class="progressDiv">
                  <el-progress
                    :show-text="false"
                    stroke-width="8"
                    :percentage="80"
                  ></el-progress>
                </div>
                <span class="productCountNum">{{ item.num }}</span>
              </div>
              <div class="jine"><span class="jineIcon">￥</span> {{ item.childMoney }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 推荐商品 -->
      <div class="card-right-top">
        <h2 class="tjH2">推荐商品</h2>
        <div
          v-for="(product, index) in recommendProducts"
          :key="index"
          class="product-item"
          @click="jumpFunc(product)"
        >
          <img class="ProdutImg" :src="product.thumb" alt="" />
          <div class="product-info">
            <div
              class="FobStype"
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <p>
                FOB
                <span style="color: #ed232a"> ¥ </span>
                <span class="itemPrice"> {{ product.price }}</span>
              </p>

              <p style="color: #848691">
                <span
                  ><img
                    class="weizhiIcon"
                    src="../../../static/engineering5188/homPage/orientation.png"
                    alt=""
                  />{{ product.shop.reg_address }}</span
                >
              </p>
            </div>
            <p class="produtName">{{ product.title }}</p>
            <p style="align-items: center; display: flex">
              <img
                class="strengthImg"
                src="../../../static/engineering5188/homPage/strength.png"
                v-if="product.shop.if_strength"
              />
              <span class="dzText">{{ product.shop.company_title }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <newPageFooter></newPageFooter>
  </div>
</template>

<script>
import newPageHeader from "../../../components/page/engineering5188/new-page-header.vue";
import newPageFooter from "../../../components/page/engineering5188/new-page-footer.vue";
export default {
  name: "Dashboard",
  components: {
    newPageHeader,
    newPageFooter,
  },
  data() {
    return {
      reputationData: [
        // 商家口碑排行榜数据
        
      ],
      recommendProducts: [
      ],
      transactionData: [
        // 交易排行榜数据
      ],
    };
  },
  created() {
    this.getWordList(); 
  },
  methods: {
    getWordList(){
      this.$httpApi("/api/wordList", {
      },'get').then(res => {
        this.reputationData = res.data;
      })

      this.$httpApi("/api/saleList", {
        
      },'get').then(res => {
        this.transactionData = res.data;
      })

      this.$httpApi("/api/proIndexList", {
        // rec:1,
        page:1,
        limit:3,
      },'get').then(res => {
        this.recommendProducts = res.data.list;
      })
    },
    format(percentage) {
      return percentage === 100 ? "满" : `${percentage}%`;
    },
    jumpFunc(item){
      this.$router.push({
        path: '/productDetails',
        query: {
          id:item.id
        }
      })
    }
    ,jumpShop(item){
      this.$router.push({
        path: '/homePage',
        query: {
          shop_id:item.id
        }
      })
    }
  },
};
</script>

<style lang="less" scoped>
.Thesea {
  font-family: Arial, Arial;
  font-weight: 400;
  font-size: 14px;
  color: #7b7b7b;

  font-style: normal;
  text-transform: none;
}

.companyName {
  font-family: Arial, Arial;
  font-weight: 400;
  font-size: 14px;
  color: #000000;

  font-style: normal;
  text-transform: none;
}
.company-navigate {
  width: 1530px;
  height: 60px;
  margin: auto;
  display: flex;
  align-items: center;
}

.company-navigate img {
  width: 14px;
  height: 14px;
  margin-right: 12px;
}

.jineIcon {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #ed232a;
  font-style: normal;
  text-transform: none;
}
.jine {
  width: 190px;
  font-family: DIN Alternate, DIN Alternate;
  font-weight: bold;
  font-size: 20px;
  color: #ed232a;
  text-align: left;
  font-style: normal;
  text-transform: none;
  text-align: center;
}
.productCountNum {
  font-family: Arial, Arial;
  font-weight: 400;
  font-size: 12px;
  color: #999999;

  font-style: normal;
  text-transform: none;
}
.weizhiIcon {
  width: 12px;
  height: 16px;
  margin-right: 7px;
}
.dzText {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #716f6b;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  padding-left: 10px;
}
.tjH2 {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 18px;
  color: #000000;

  font-style: normal;
  text-transform: none;
}
.FobStype {
  margin-top: 16px;
  font-size: 14px;
}
.produtName {
  width: 297px;
  height: 22px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #000000;
  margin-top: 12px;
  margin-bottom: 20px;
  font-style: normal;
  text-transform: none;
}
.product-info {
  padding: 0 12px;
}
.strengthImg {
  width: 78px;
  height: 20px;
}

.itemPrice {
  font-family: DIN Alternate, DIN Alternate;
  font-weight: bold;
  font-size: 24px;
  color: #ed232a;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.xingxing {
  font-size: 30px;
  width: 140px;
}

.h2Title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 18px;
  color: #000000;

  text-align: left;
  font-style: normal;
  text-transform: none;
  padding-top: 16px;
}
.itemName {
  width: 350px;

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #000000;

  font-style: normal;
  text-transform: none;
}
.list-iitemOne {
  width: 32px;
  height: 30px;
  margin-right: 73px;
  line-height: 40px;
  text-align: center;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  font-style: normal;
  text-transform: none;
  background-image: url("../../../static/engineering5188/supplier/oneIcon.png");
}

.list-iitemTwo {
  width: 32px;
  height: 30px;
  margin-right: 73px;
  line-height: 40px;
  text-align: center;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  font-style: normal;
  text-transform: none;
  background-image: url("../../../static/engineering5188/supplier/twoIcon.png");
}

.list-iitemThree {
  width: 32px;
  height: 30px;

  margin-right: 73px;
  line-height: 40px;
  text-align: center;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  font-style: normal;
  text-transform: none;
  background-image: url("../../../static/engineering5188/supplier/threeIcon.png");
}

.list-iitemFour {
  width: 32px;
  height: 30px;
  margin-right: 73px;
  line-height: 40px;
  text-align: center;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  font-style: normal;
  text-transform: none;
  background-image: url("../../../static/engineering5188/supplier/FourIcon.png");
}

.list-iitemthree {
  margin-left: 100px;
  margin-right: 100px;
}
.progressDiv {
  width: 110px;
  margin-right: 12px;
}
.list-item {
  width: 904px;
  height: 63px;
  border-top: 1px solid #f0f0f0;
  line-height: 63px;
  display: flex;
  align-items: center;
  text-align: left;
  padding: 0 48px;
  margin: auto;
  cursor: pointer;
}

.pOne {
  padding-right: 98px;
  padding-left: 47px;
}
.pthree {
  padding-left: 292px;
  padding-right: 192px;
}
.list-Heard {
  width: 904px;
  height: 36px;
  background: #f8f9fa;
  border-radius: 0px 0px 0px 0px;
  line-height: 36px;
  display: flex;
  margin: auto;
  margin-top: 24px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
  font-style: normal;
  text-transform: none;
  text-align: right;
}
.xian {
  width: 5px;
  height: 24px;
  background: #ff6f00;
  border-radius: 0px 0px 0px 0px;
  margin-right: 25px;
}
.dashboard {
  display: flex;
  flex-wrap: wrap;
  width: 1530px;
  margin: auto;
  margin-bottom: 30px;
}

.card-left-top,
.card-left-bottom {
  width: 964px;
  margin-top: 30px;
  background-color: #fff;
}

.card-right-top {
  width: 412px;
  height: auto;
  margin: 30px;
  background-color: #fff;
  padding: 16px 24px;
}

.product-item {
  background: #ffffff;
  height: 400px;
  border: 1px solid #ededed;

  margin-top: 20px;
}

.ProdutImg {
  width: 360px;
  height: 262px;
  margin-right: 10px;
}
</style>